<!--  -->
<template>
  <div class="container">
    <div class="title">编辑个人信息</div>
    <div class="edit_wrap">
      <div class="info">
        <el-form
          size="mini"
          :model="ruleForm"
          :rules="rules"
          label-width="80px"
        >
          <el-form-item label="昵称：" prop="username">
            <el-input v-model="ruleForm.username" clearable></el-input>
          </el-form-item>
          <el-form-item label="介绍：">
            <el-input
              rows="4"
              type="textarea"
              v-model="ruleForm.introduce"
              maxlength="300"
              show-word-limit
            >
            </el-input>
          </el-form-item>
          <el-form-item label="性别：">
            <el-radio-group fill="#D12923" v-model="ruleForm.gender">
              <el-radio label="保密"></el-radio>
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="生日：">
            <el-date-picker
              value-format="timestamp"
              v-model="ruleForm.birthday"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="地区：">
            <el-cascader
              size="mini"
              :options="ruleForm.options"
              v-model="ruleForm.selectedOptions"
            >
            </el-cascader>
          </el-form-item>
          <el-form-item size="large">
            <el-button type="danger" @click="onSubmit">保存</el-button>
            <el-button @click="goback">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="cover">
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          action="ee"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :on-change="handleChange"
          :http-request="imgLoad"
        >
          <div class="img">
            <img :src="imageUrl" class="avatar" />
          </div>
          <el-button>修改头像</el-button>
        </el-upload>
      </div>
    </div>
  </div>
</template>

<script>
import { provinceAndCityData, CodeToText } from "element-china-area-data";
import { getUserInfo, UserEdit,EditCover } from "util/login.js";
export default {
  name: "",
  watch: {
    ruleForm: {
      handler(newVal) {
        // console.log(this.ruleForm.birthday)
      },
      deep: true,
    },
  },
  data() {
    return {
      profile: {},
      sex: 0,
      ruleForm: {
        username: "",
        introduce: "",
        gender: "",
        birthday: "",
        options: provinceAndCityData,
        selectedOptions: [],
      },
      imageUrl: "",
      tempUrl: "",
      rules: {
        username: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          {
            min: 4,
            max: 30,
            message: "昵称为4-30个字，且不包括-和_以外的特殊字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getUserInfo();
    // console.log(this.$route.params);
  },
  methods: {
    async getUserInfo() {
      let { data } = await getUserInfo(this.$route.params.id.split("d")[1]);
      //   console.log(data)
      this.profile = data.profile;
      this.ruleForm.username = this.profile.nickname;
      this.ruleForm.introduce = this.profile.signature;
      switch (this.profile.gender) {
        case 0:
          this.ruleForm.gender = "保密";
          break;
        case 1:
          this.ruleForm.gender = "男";
          break;
        case 2:
          this.ruleForm.gender = "女";
          break;
      }
      this.ruleForm.birthday = this.profile.birthday;
      this.ruleForm.selectedOptions = [
        this.profile.province.toString(),
        this.profile.city.toString(),
      ];
      this.imageUrl = this.profile.avatarUrl;
    },
    goback() {
      this.$router.go(-1);
    },
    async onSubmit() {
      switch (this.ruleForm.gender) {
        case "保密":
          this.sex = 0;
          break;
        case "男":
          this.sex = 1;
          break;
        case "女":
          this.sex = 2;
          break;
      }
      let { data } = await UserEdit(
        this.sex,
        this.ruleForm.birthday,
        this.ruleForm.username,
        this.ruleForm.selectedOptions[0],
        this.ruleForm.selectedOptions[1],
        this.ruleForm.introduce
      );
      //   console.log(data)
      if (data.code == 200) {
        this.refresh()

        this.$message({
          message: "修改个人资料成功",
          type: "success",
        });
      }
    },
    handleAvatarSuccess(res, file) {
      // console.log(file);
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG ) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M ;
    },
    //将上传图片的原路径赋值给临时路径
    handleChange(file) {
      this.tempUrl = URL.createObjectURL(file.raw);
    },
    async imgLoad(item) {
        var formData = new FormData()
        //将图片文件放入formData
        formData.append('imgFile', item.file)

        let {data} = await EditCover(formData)
        if(data.code == 200){
          this.$message('头像修改成功')
        }
      }
    },
};
</script>

<style scoped lang='less'>
.container {
  padding: 20px 30px;
}
.title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
}
.edit_wrap {
  display: flex;
  justify-content: space-between;
  .info {
    flex: 1;
    .el-input {
      width: 400px;
      height: 10px;
    }
    .el-textarea {
      width: 400px;
    }
  }
  .cover {
    flex: 1;
    .el-button {
      border-radius: 20px;
    }
    .img {
      margin-bottom: 20px;
      width: 150px;
      height: 150px;
      img {
        border-radius: 4px;
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>